<template>
  <div>
    <!-- 模板里不需要写this，模板中可以获取到VC的所有属性 -->
    <h1>当前求和为: {{ sum }}</h1>
    <h3>当前求和放大十倍为: {{ BigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>

    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>

    <!-- 2：Vue中方法如果不传参，默认是传递事件导致Vuex报错 -->
    <!-- 使用Vuex简写方法调用时，一定要传递指定参数过去 -->
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="allAdd(n)">总数为奇数时再加</button>
    <button @click="waitAdd(n)">延迟添加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    ...mapState(['sum', 'school', 'subject']),
    ...mapGetters(['BigSum'])
  },
  methods: {
    // 0：程序员亲自获取
    // increment() {
    //   this.$store.commit('JIA', this.n)
    // },
    // decrement() {
    //   this.$store.commit('JIAN', this.n)
    // },


    // 1：借助mapMutations生成对应的方法，同计算属性简写，方法名和调用的具体方法
    ...mapMutations({
      increment: 'JIA',
      decrement: 'JIAN'
    }),

    // 2：如果名称是相同的，也可使用数组进一步简化
    // ...mapMutations(['JIA', 'JIAN']),


    // *****************************************


    // allAdd() {
    //   //奇数时再加，业务逻辑放在action中处理
    //   this.$store.dispatch('jiaOdd', this.n)
    // },
    // waitAdd() {
    //   this.$store.dispatch('jiaWait', this.n)
    // },

    // 1：对象写法
    ...mapActions({
      allAdd: 'jiaOdd',
      waitAdd: 'jiaWait'
    })

    // 2：数组简化
    // ...mapActions(['jiaOdd', 'jiaWait'])

  }
};
</script>

<style>
bottom {
  margin-left: 5px;
}
</style>
